<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <link rel="stylesheet" href='__STATIC__/layui/js/vue/index.css'></link>
    <style>
        h3{margin-bottom: 20px;font-weight:400;font-size: 16px;color: #555;}
        .power{padding: 20px;padding-bottom: 100px;width: 250px;float:left;}
        .power-list .but{margin-top: 30px;}
        .power-list{width: 240px;float:right;padding: 20px;}
        .power-list p{line-height: 26px;color: #555;}
        .name{padding: 20px;font-size: 20px;font-weight: 600;border-bottom:1px solid #ccc;}
    </style>
</head>
<body>
<div class="content" id='app'>
    <div class="name">给 {$role_name}角色 分配权限：</div>
    <div class="power">
        <h3>分配权限</h3>
        <el-tree 
        :data="nodeArr" 
        node-key="id" 
        default-expand-all 
        :expand-on-click-node="false" 
        ref="tree" 
        show-checkbox 
        expand-on-click-node 
        @check-change="getCheck" 
        :default-checked-keys='nodeID'>
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
            </span>
        </el-tree>
    </div>
    <div class="power-list">
        <h3>已选中的权限</h3>
        <p v-for="(v,index) in powerArr">{{v}}</p>
        <div class='but'><el-button type="primary"  @click="ptFun">确认分配选中权限</el-button></div>
    </div>
    
</div>
<script src="__STATIC__/layui/js/jquery/jquery-1.9.1.min.js"></script>
<script src="__STATIC__/layui/js/vue/vue.min.js"></script>
<script src="__STATIC__/layui/js/vue/index.js"></script>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    } 
    var role_id = getUrlParam('role_id');//获取角色ID


    var vm = new Vue({
        el: '#app',
        data: {
            nodeArr: [],//后台返回所有节点
            powerArr: [],//获取选中的节点名称
            idArr:[],//获取选中的节点
            nodeID:[]//角色所拥有的节点
        },
        created() {
            var anThis = this;
            //获取所有节点
            $.ajaxSettings.async = false;//ajax同步
            $.post("{:url('admin/rbac/ajax_node')}", function (msg) {
                anThis.nodeArr = anThis.dg(msg);
            })
            $.post("{:url('admin/rbac/ajax_get_role_node')}?role_id="+ role_id, function (msg) {
                console.log(msg)
                for(var i=0;i<msg.length;i++){
                    anThis.nodeID.push(msg[i].id);
                }
            })
        },
        methods: {
            //递归
            dg(msg, pid = 0) {
                var node = [];
                for (var i = 0; i < msg.length; i++) {
                    if (msg[i].pid == pid) {
                        var arr = {
                            id: msg[i].id,
                            label: msg[i].notes,
                            children: this.dg(msg, msg[i]['id'])//调用自身
                        }
                        node.push(arr)
                    }
                }
                return node;
            },
            dgData(data){
                var node = [data.id];
                for (var i = 0; i < data['children'].length; i++) {
                    // var arr = [data[id]];
                    node.push(data['children'][i].id);
                    if(data['children'][i]['children'].length != undefined){
                        this.dgData(data['children'][i]['children']);
                    }
                }
                return node;
            },
            //上传已分配的权限
            ptFun(){
                $.post("{:url('admin/rbac/ajax_role_power')}?role_id="+ role_id,{node: this.idArr},function(msg){
                    parent.layer.close(parent.layer.index);
                    if (msg.code == 200) {
                        parent.layer.msg(msg.tips)
                    } else {
                        parent.layer.msg(msg.tips)
                    }
                })
                
            },
            //获取勾选的权限
            getCheck(data){
                this.idArr=[];
                this.powerArr=[];
                var node  = this.$refs.tree.getCheckedNodes();//返回目前被选中的节点所组成的数组

                //获取勾选权限的id
                 for (var i = 0; i < node.length; i++) {
                     this.idArr.push(node[i].id)
                 }

                 //获取勾选权限的名称
                 for (var j = 0; j < node.length; j++) {
                     this.powerArr.push(node[j].label)
                 }
            }


        }
    })

</script>
</body>
</html>